<template>
<view class="content">
  <topHeight></topHeight>
  <view class="header">
    <view class="back" @click="toBack">
      <view class="iconfont icon-prev"></view>
      <text>返回</text>
    </view>
    <view class="head-picture">
      <img :src="headPicture">
    </view>
    <view class="state-info">
      <text>{{name}}</text>
      <view class="identity">{{identity}}</view>
    </view>
<!--    <Wave></Wave>-->
  </view>
  <view class="tab">
    <view class="tab-select-item"
          v-for="(item,index) in tabList"
          :key="index"
          @click="tabChange(index)"
          :class="tabIndex === index?'tab-select-item-active':''"
    >
      {{item}}
    </view>
  </view>
  <view class="content-list"
        :style="isLoading?'display:flex;justify-content: center;align-items: center;height:300rpx;position:relative':''"
  >
    <Loading v-if="isLoading" ></Loading>
  </view>
  <view>没有更多数据了</view>
</view>
</template>

<script>
import Loading from "@/components/Loading";
import topHeight from "@/components/top-height";
// import Wave from "@/components/Wave";

export default {
name: "MyHome",
  components:{
    Loading,
    topHeight,
    // Wave,
  },
  data(){
    return{
      tabList:["我的动态","我的关注","关注我的","我的收藏"],
      tabIndex:0,
      isLoading:false,
      headPicture:'../../../static/logo.png',
      identity:'游客',
      name:'大聪明',
    }
  },
  mounted(){
  },
  methods:{
    toBack(){
      uni.navigateBack({

      });
    },
    tabChange(index){
      this.tabIndex = index;
      switch (Number(index)){
        case 0:
          console.log(this.tabList[index]);
          break;
        case 1:
          console.log(this.tabList[index]);
          this.isLoading = true;
          // this.getData();
          break;
        case 2:
          console.log(this.tabList[index]);
          break;
        case 3:
          console.log(this.tabList[index]);
          break;
        default:
          console.log("无");
      }
    },
  }
}

</script>

<style lang="scss" scoped>
uni-page-body {
  width: 100%;
  height: 100%;
}

.content{
  background: #F1F1F1;
  min-width: 100%;
  min-height: 100%;
  .header{
    padding-top: 50rpx;
    width: 100%;
    height: 400rpx;
    background: linear-gradient(150deg, #FDB490 0%, #F06E65 100%);
    position: relative;
    //background: linear-gradient(to bottom right, #FDB490 0%,#F06E65 100%);
    .back{
      margin: 0 0 20rpx 20rpx;
      width: 150rpx;
      height: 70rpx;
      //position: absolute;
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:  70rpx;
      background-color: rgba(128,128,128,0.5);
      color: #FFFFFF;
      font-size: 35rpx;
    }
    .head-picture{
      position: absolute;
      width: 170rpx;
      height: 170rpx;
      //background-color: #2ecc71;
      border-radius: 100%;
      left: 40rpx;
      top: 150rpx;
      overflow: hidden;
      z-index: 999;
      background-color: #FFFFFF;
      box-shadow: 0 0 10rpx #FFFFFF;
      img{
        height: 160rpx;
        width: 160rpx;
        border-radius: 50%;
        margin: 5rpx;
      }
    }
    .state-info{
      position: absolute;
      color: #FFFFFF;
      left: 260rpx;
      top: 180rpx;
      text-align: center;
      align-items: center;
      font-size: 35rpx;
      .identity{
        border: 2rpx solid #FFFFFF;
        border-radius: 25rpx;
        margin-top: 20rpx;
        font-size: 30rpx;
      }
    }

    }
  .tab{
    width: 100%;
    height: 100rpx;
    background-color: #FFFFFF;
    display: flex;
    //justify-content: space-around;
    line-height: 100rpx;
    font-size: 30rpx;
    .tab-select-item{
      flex: 1;
      height: 100%;
      //line-height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #6F6F6F;
      font-size: 32rpx;
    }
    .tab-select-item-active{
      color: #F37B1D;
      border-bottom: 3rpx solid #F37B1D;
    }
  }
}

</style>
